feat(content-sidebar): add drag-to-resize handle [spike]#4545
feat(content-sidebar): add drag-to-resize handle [spike]#4545jmcbgaston wants to merge 2 commits intomasterfrom
Conversation
Introduces a pointer- and keyboard-accessible resize handle on the left edge of the sidebar. Current default width becomes the minimum; maximum is clamped at 60% of the viewport. Width state lives on the `Sidebar` component and is session-only (no persistence). New `SidebarResizeHandle` component is a `role="separator"` with live `aria-valuenow`/`aria-valuemin`/`aria-valuemax`, supports ArrowLeft / ArrowRight / Home / End for keyboard resize, and uses pointer capture during drag. Currently gated behind a mocked `const isResizable = true` — replace with a real feature flag check before shipping.
`.bcs` becomes `position: relative` so the absolutely-positioned handle can sit on the left edge. When `.bcs-is-resizable.bcs-is-open` is present, `min-width` pins at the existing default so the user can only grow. Inline style on the `<aside>` overrides `max-width` to permit the dragged width. New `SidebarResizeHandle.scss` styles a 6px col-resize strip with hover / focus-visible / active-drag states.
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
Description
Adds a drag-to-resize handle on the left edge of
ContentSidebar. Users can grow the sidebar from the current default width (the existing340pxcontent /380pxwider variant, plus the60pxtabs rail) up to 60% of the viewport. Existing flex reflow on.bcpr-contentcausesContentPreview.onResizeto fire automatically, which already callspreview.resize()— so the preview viewer reflows without any new wiring.New
SidebarResizeHandleis arole="separator"widget with:pointerdown→ windowpointermove/pointerup, withsetPointerCapture)ArrowLeft/ArrowRight(16px step),Home/End(jump to min / max)aria-valuenow/aria-valuemin/aria-valuemaxState is session-only — no persistence across reloads.
Spike caveat: the resize feature is gated behind a mocked
const isResizable = trueinSidebar.js. Before merging, swap this for a real feature flag check (there is aTODOcomment marking the spot).Known gaps (out of scope for this draft)
$medium-screen) — the mobile layout collapses the sidebar to a top strip, where the drag handle shouldn't render.Test plan
col-resizeand the edge should highlight.ArrowLeft/ArrowRightresize by 16px,Home/Endjump to min / max..bcs-is-wider) — default width is440px, min is440px, drag still works.Semantic release type
feat- New feature